<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Events | Rendering Events</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }

      p {
        max-width: 600px;
      }
    </style>
  </head>
  <body>
    <p>
      You can draw on the canvas using normal HTML5 canvas functions. The before
      drawing will be behind the network, the after drawing will be in front of
      the network.
    </p>

    <div id="mynetwork"></div>
    <pre id="eventSpan"></pre>
    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" },
      ]);

      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
      ]);

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {};
      var network = new vis.Network(container, data, options);

      network.on("initRedraw", function () {
        // do something like move some custom elements?
      });
      network.on("beforeDrawing", function (ctx) {
        var nodeId = 1;
        var nodePosition = network.getPositions([nodeId]);
        ctx.strokeStyle = "#A6D5F7";
        ctx.fillStyle = "#294475";

        ctx.beginPath();
        ctx.arc(
          nodePosition[nodeId].x,
          nodePosition[nodeId].y,
          50,
          0,
          2 * Math.PI,
          false,
        );
        ctx.closePath();

        ctx.fill();
        ctx.stroke();
      });
      network.on("afterDrawing", function (ctx) {
        var nodeId = 1;
        var nodePosition = network.getPositions([nodeId]);
        ctx.strokeStyle = "#294475";
        ctx.lineWidth = 4;
        ctx.fillStyle = "#A6D5F7";

        ctx.beginPath();
        ctx.arc(
          nodePosition[nodeId].x,
          nodePosition[nodeId].y,
          20,
          0,
          2 * Math.PI,
          false,
        );
        ctx.closePath();

        ctx.fill();
        ctx.stroke();
      });
    </script>
  </body>
</html>
